<template>
  <div>
    <!-- 条件 -->
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" :model="queryParams" ref="queryFormRef">
        <a-row :gutter="16">
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-model-item label="定时任务ID" prop="jobId">
              <a-input v-model="queryParams.jobId" placeholder="请输入定时任务ID" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-model-item label="任务标题" prop="title">
              <a-input v-model="queryParams.title" placeholder="请输入任务标题" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-model-item label="任务名称" prop="jobName">
              <a-input v-model="queryParams.jobName" placeholder="请输入任务名称" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
            <a-form-model-item label="任务组名" prop="jobGroup">
              <a-input v-model="queryParams.jobGroup" placeholder="请输入任务组名" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
            <a-form-model-item label="参数" prop="params">
              <a-input v-model="queryParams.params" placeholder="请输入参数" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
            <a-form-model-item label="cron表达式" prop="cron">
              <a-input v-model="queryParams.cron" placeholder="请输入cron表达式" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
            <a-form-model-item label="状态码" prop="code">
              <a-input v-model="queryParams.code" placeholder="请输入状态码" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
            <a-form-model-item label="耗时(ms)" prop="time">
              <a-input v-model="queryParams.time" placeholder="请输入耗时(ms)" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
            <a-form-model-item label="执行结果" prop="result">
              <a-input v-model="queryParams.result" placeholder="请输入执行结果" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
            <a-form-model-item label="备注" prop="remark">
              <a-input v-model="queryParams.remark" placeholder="请输入备注" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
            <a-form-model-item label="创建时间" prop="createTime">
              <a-input v-model="queryParams.createTime" placeholder="请输入创建时间" allow-clear/>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <span class="table-page-search-submitButtons">
              <a-space>
                <a-button type="primary" @click="handleQuery"><a-icon type="search"/>查询</a-button>
                <a-button @click="handleReset"><a-icon type="redo"/>重置</a-button>
                <a @click="advanced = !advanced">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </a-space>
            </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!-- 按钮 -->
    <div class="table-operations">
      <a-button type="primary" icon="plus" @click="$refs.createForm.handleAdd()" v-has-permi="['quartz:jobLog:save']">新增</a-button>
      <a-button type="primary" icon="menu-unfold" @click="$refs.importForm.handleImport()" v-has-permi="['quartz:jobLog:import']">导入</a-button>
      <a-button type="primary" icon="download" @click="handleExport" v-has-permi="['quartz:jobLog:export']">导出</a-button>
      <a-button type="danger" icon="delete" :disabled="multiple" @click="handleRemoveBatch" v-has-permi="['quartz:jobLog:removeBatch']">批量删除</a-button>
      <table-setting
        :style="{float: 'right'}"
        :table-size.sync="tableSize"
        v-model="columns"
        :refresh-loading="loading"
        @refresh="getList"/>
    </div>
    <!-- 表格 -->
    <a-table
      :loading="loading"
      :size="tableSize"
      rowKey="id"
      :columns="columns"
      :data-source="jobLogList"
      :row-selection="{selectedRowKeys: selectedRowKeys, onChange: handleSelectRow}"
      :pagination="false"
      :bordered="tableBordered">
      <template v-slot:operation="value, row">
        <a @click="$refs.createForm.handleUpdate(row)" v-has-permi="['quartz:jobLog:update']"><a-icon type="edit"/>修改</a>
        <a-divider type="vertical"/>
        <a @click="handleRemove(row)" v-has-permi="['quartz:jobLog:remove']"><a-icon type="delete"/>删除</a>
      </template>
    </a-table>
    <!-- 分页 -->
    <a-pagination
      class="ant-table-pagination"
      show-size-changer
      show-quick-jumper
      :current="queryParams.pageNum"
      :total="total"
      :page-size="queryParams.pageSize"
      :showTotal="total => `共 ${total} 条`"
      @showSizeChange="handleSizeChange"
      @change="handleSizeChange"/>
    <!-- 新增/修改 -->
    <create-form ref="createForm" @ok="getList"/>
    <!-- 导入 -->
    <import-form ref="importForm" @ok="getList"/>
  </div>
</template>
<script>
import {tableMixin} from '@/store/table-mixin'
import CreateForm from './modules/CreateForm'
import ImportForm from './modules/ImportForm'
import {listJobLog, removeJobLog, removeBatchJobLog, exportJobLog} from '@/api/quartz/jobLog'

export default {
  components: {
    CreateForm,
    ImportForm
  },
  mixins: [tableMixin],
  data() {
    return {
      jobLogList: [],
      selectedRowKeys: [],
      selectedRows: [],
      advanced: false,
      single: true,
      multiple: true,
      loading: false,
      total: 0,
      queryParams: {
        jobId: undefined,
        title: undefined,
        jobName: undefined,
        jobGroup: undefined,
        params: undefined,
        cron: undefined,
        code: undefined,
        time: undefined,
        result: undefined,
        remark: undefined,
        createTime: undefined,
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        {dataIndex: 'jobId', title: '定时任务ID', align: 'center'},
        {dataIndex: 'title', title: '任务标题', align: 'center'},
        {dataIndex: 'jobName', title: '任务名称', align: 'center'},
        {dataIndex: 'jobGroup', title: '任务组名', align: 'center'},
        {dataIndex: 'params', title: '参数', align: 'center'},
        {dataIndex: 'cron', title: 'cron表达式', align: 'center'},
        {dataIndex: 'code', title: '状态码', align: 'center'},
        {dataIndex: 'time', title: '耗时(ms)', align: 'center'},
        {dataIndex: 'result', title: '执行结果', align: 'center'},
        {dataIndex: 'remark', title: '备注', align: 'center'},
        {dataIndex: 'createTime', title: '创建时间', align: 'center'},
        {dataIndex: 'operation', title: '操作', align: 'center', fixed: 'right', width: '120', scopedSlots: {customRender: 'operation'}}
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      listJobLog(this.queryParams).then(res => {
        this.jobLogList = res.data
        this.total = res.total
        this.loading = false
      })
    },
    /** 点击搜索 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 点击重置 */
    handleReset() {
      this.$refs.queryFormRef.resetFields()
      this.handleQuery()
    },
    /** 分页变化 */
    handleSizeChange(current, pageSize) {
      this.queryParams.pageNum = current
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    /** 选择行 */
    handleSelectRow(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 点击删除 */
    handleRemove(row) {
      this.$confirm({
        title: '删除提示',
        content: '确认删除所选中数据?',
        onOk: () => {
          removeJobLog(row.id).then(res => {
            this.$message.success(res.msg)
            this.getList()
          })
        }
      })
    },
    /** 点击批量删除 */
    handleRemoveBatch() {
      this.$confirm({
        title: '批量删除提示',
        content: '确认删除所选中数据?',
        onOk: () => {
          removeBatchJobLog(this.selectedRowKeys).then(res => {
            this.$message.success(res.msg)
            this.getList()
          })
        }
      })
    },
    /** 点击导出 */
    handleExport() {
      this.$confirm({
        title: '导出提示',
        content: '确定导出当前条件下的所有数据吗?',
        onOk: () => {
          exportJobLog(this.queryParams).then(res => {
            this.$message.success(res.msg)
          })
        }
      })
    }
  }
}
</script>
